<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态路由匹配</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
<h1>Dynamic Route Matching</h1>
<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- use router-link component for navigation. -->
        <!-- specify the link by passing the `to` prop. -->
        <!-- `<router-link>` will be rendered as an `<a>` tag by default -->
        <router-link to="/user/foo">Go to Foo</router-link>
        <router-link to="/forum/Lily/post/123">Go to Post</router-link>
    </p>
    <!-- route outlet -->
    <!-- component matched by the route will render here -->
    <router-view></router-view>
</div>


<!--
Keep in mind that this.$router is exactly the same as using router.
The reason we use this.$router is because we don't want to
import the router in every single component that needs to manipulate routing.
-->
</body>
<script>
    /**
     *
     <p>Very often we will need to map routes with the given pattern to the same component.<br>
     For example we may have a User component which should be rendered for all users but with different user IDs.<br>
     In vue-router we can use a dynamic segment in the path to achieve that:</p>
     */

    const User = {
        template: '<div>User {{ $route.params.id }}</div>'
    }

    const Forum = {
        template: '<div>Forum {{ $route.params.username }} - {{ $route.params.post_id}}</div>'
    }

    const router = new VueRouter({
        routes: [
            // dynamic segments start with a colon
            { path: '/user/:id', component: User },
            { path: '/forum/:username/post/:post_id', component: Forum}
        ]
    })
    /**
     * Now URLs like /user/foo and /user/bar will both map to the same route.
     */

    // 4. Create and mount the root instance.
    // Make sure to inject the router with the router option to make the
    // whole app router-aware.
    const app = new Vue({
            router
        }).$mount('#app')

</script>
</html>